<template>
  <view class="change-detail">
    <view class="change-detail-header flex flex-evenly">
      <view :class="{active:activeIndex===1}" @click="activeIndex=1">详细详情</view>
      <view class="line"></view>
      <view :class="{active:activeIndex===2}" @click="activeIndex=2">报价变更单</view>
    </view>
    <view class=change-detail-container v-show="activeIndex===1">
      <view class="detail-container">
        <view class="mb20 label" v-if="objItem.ownerVisibleContent">变更内容</view>
        <view class="mb40" v-if="objItem.ownerVisibleContent">
          {{ objItem.ownerVisibleContent }}
        </view>
        <view class="mb20 label" v-if="objItem.plainEndDate">预计完成日期</view>
        <view class="mb40" v-if="objItem.plainEndDate">{{ objItem.plainEndDate || "" }}</view>
        <view class="mb20 label" v-if="objItem.expectedDelayDays>0">预计延期天数</view>
        <view class="mb40 " v-if="objItem.expectedDelayDays>0">{{ objItem.expectedDelayDays || 0 }}天</view>
        <view class="mb20 label" v-if="objItem.customerCompensationAmount>0">赔偿金额</view>
        <view class="mb40" v-if="objItem.customerCompensationAmount>0">¥{{
            objItem.customerCompensationAmount || 0.00
          }}
        </view>
        <view class="mb20 label" v-if="objItem.quoteChangeAmount>0">报价变更单费用合计</view>
        <view class="mb40" style="color: #FF3333" v-if="objItem.quoteChangeAmount>0">¥{{
            objItem.quoteChangeAmount || 0.00
          }}
        </view>
        <view class="mb20 label" v-if="objItem.customerTotalPaymentDue >0|| objItem.customerTotalPaymentDue>0">
          {{ objItem.customerTotalPaymentDue ? "应付金额合计" : "退款金额合计" }}
        </view>
        <view class="mb40" v-if="objItem.customerTotalPaymentDue>0 || objItem.customerTotalPaymentDue>0">¥{{
            objItem.customerTotalPaymentDue ? objItem.customerTotalPaymentDue : objItem.customerTotalCollectionAmount
          }}
        </view>
        <view class="mb20 label" v-if="ownerVisiblePicUrls.length>0">图片</view>
        <view class="flex detail-img" v-if="ownerVisiblePicUrls.length>0">
          <wd-img :width="80" :height="80" enable-preview v-for="item in ownerVisiblePicUrls" :key="item" :src="item"/>
        </view>
        <view class="mb20 label" v-if="ownerVisibleVideoUrls.length>0">视频</view>
        <view class="flex detail-video" v-if="ownerVisibleVideoUrls.length>0">
          <video id="myVideo" v-for="item in ownerVisibleVideoUrls" :key="item" :src="item" controls></video>
        </view>
      </view>
    </view>
    <view class="change-order" v-show="activeIndex===2">
      <view v-if="exchangeOrderDetail!=null">
        <CardDetails title="退货单" :obj-item="exchangeOrderDetail?.returnOrder||{}"/>
        <CardDetails title="换补单" :obj-item="exchangeOrderDetail?.replacementOrder||{}"/>
      </view>
      <Empty v-else/>
    </view>
  </view>
</template>
<script setup>
import {ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import CardDetails from "@/components/cardDetails/index"
import {getReform} from "@/api/contract";
import Empty from "@/components/empty/index.vue";

const returnOrder = ref({}) // 退货单详情
const replacementOrder = ref({}) // 换补单详情
const ownerVisiblePicUrls = ref([]) // 图片
const ownerVisibleVideoUrls = ref([]) //视频
const exchangeOrderDetail = ref({}) //退货单详情
const activeIndex = ref(1)
const objItem = ref({})
onLoad(async (option) => {
  console.log(option, 999);
  const {data} = await getReform(option.reformId || '')
  objItem.value = data
  ownerVisiblePicUrls.value = data.ownerVisiblePicUrls !== "" && data.ownerVisiblePicUrls.split(",")
  ownerVisibleVideoUrls.value = data.ownerVisibleVideoUrls !== "" && data.ownerVisibleVideoUrls.split(",")
  exchangeOrderDetail.value = data.exchangeOrderDetail
})


</script>


<style scoped lang="scss">
.change-detail {
  font-size: 32rpx;

  &-header {
    background: #FFFFFF;
    color: #86909C;
    padding: 20rpx 0;

    .line {
      width: 8rpx;
      height: 40rpx;
      background: #E2E8F0;
      border-radius: 4rpx 4rpx 4rpx 4rpx;
    }

    .active {
      color: #007DFF;
    }
  }

  &-container {
    font-size: 24rpx;
    padding: 32rpx;

    .detail-container {
      background: #FFFFFF;
      padding: 32rpx;
      font-weight: 24rpx;
    }

    .detail-img {
      flex-wrap: wrap;

      :deep(.wd-img) {
        margin-right: 32rpx;
        margin-bottom: 20rpx;

        image {
          border-radius: 12rpx;
        }
      }

    }

    .detail-video {
      flex-wrap: wrap;

      video {
        width: 160rpx;
        height: 160rpx;
        margin-right: 32rpx;
        margin-bottom: 20rpx;
      }
    }
  }
}

.change-order {
  padding: 32rpx;

  .is-dot {
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
    margin-right: 16rpx;
    background: #409EFF;
  }


}

.label {
  font-size: 26rpx;
  color: #3D3D3D;
  font-weight: 600;
}
</style>